<template>
  <div>
    <div class="header">
      <el-select v-model="value" filterable placeholder="请选择部门">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2"
          @change="inputChange">
      </el-input>
    </div>
    <div class="body">
      <el-table
          :data="tableData"
          style="width: 100%"
          max-height="550"
          :border="true"
          :stripe="true"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55"
            align="center">
        </el-table-column>
        <el-table-column
            type="index"
            fixed
            label="编号"
            width="80">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="100">
        </el-table-column>
        <el-table-column
            label="性别"
            width="100">
          <template slot-scope="scope">
            <span>{{scope.row.sex === '0'? '男':'女'}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="department"
            label="部门"
            width="100">
        </el-table-column>
        <el-table-column
            prop="job"
            label="职务"
            width="120">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            width="150">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话"
            width="150">
        </el-table-column>
        <el-table-column
          prop="desc"
          label="描述"
          align="center">
      </el-table-column>

        <el-table-column
            label="操作"
            width="150">
          <template slot-scope="scope">
            <!-- scope 对应的是 当前这一行所对应的那一条数据 -->
            <el-button
                @click="edit(scope)"
                type="default"
                size="small">
              编辑
            </el-button>
            <el-button
                @click="deleteRow(scope)"
                type="danger"
                size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {getUserList, getList, deleteUser} from "../../../api/api";

export default {
  name: "user",
  data() {
    return {
      tableData: [],
      input2: '',
      options: [],
      value: '',
      // 保存的多选框选中的数据
      multipleSelection: []
    }
  },
  created() {
    getList().then(data => {
      // 如果没有查到，就返回空数组
      let ary = data.data || [];
      ary.unshift({
        id: 0,
        name: '全部'
      });
      this.options = ary;
    })
    this.getUserList()
  },
  methods: {
    // 多选框的方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getUserList(options) {
      getUserList(options).then(data => {
        data.data? this.tableData = data.data : this.$message.error('没有查找到相应的数据');
      })
    },
    inputChange(val) {
      this.getUserList({
        departmentId: this.value,
        search: val
      })
    },
    edit(obj){
      this.$router.push({
        path: '/org/addUser',
        query: {
          id: obj.row.id
        }
      })
    },
    deleteRow(obj){
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(obj.row.id).then(data => {
          this.tableData.splice(obj.$index,1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  watch: {
    value(val) {
      // 下拉框中值改变,就重新请求数据
      this.getUserList({
        departmentId:val,
        search:this.input2
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  float: right;
  margin-bottom: 20px;
  .el-input {
    width: auto;
    margin-left: 20px;
  }
}
</style>
